<script>
</script>

<template>
	
	<div class="header">
		<div style="height: 80px;background-color: greenyellow">	
		<div class="relative mr-6">
		        <input 
		          type="text" 
		          placeholder="Search (Ctrl+K)" 
		          class="py-1.5 px-3 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
		        >
		      </div>
		<nav class="hidden md:flex items-center space-x-6">
	        <a href="#" class="text-gray-600 hover:text-primary text-sm transition-colors">基础与入门</a>
	        <a href="#" class="text-gray-600 hover:text-primary text-sm transition-colors">HTML</a>
	        <a href="#" class="text-gray-600 hover:text-primary text-sm transition-colors">CSS</a>
	        <a href="#" class="text-gray-600 hover:text-primary text-sm transition-colors">JavaScript</a>
	        <a href="#" class="text-gray-600 hover:text-primary text-sm transition-colors">网页布局</a>
	        <a href="#" class="text-gray-600 hover:text-primary text-sm transition-colors">Git</a>
	        <a href="#" class="text-gray-600 hover:text-primary text-sm transition-colors">帮助中心</a>
	  <!-- <button class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-gray-600 hover:bg-gray-100 transition-colors">
	    <i class="fa fa-cog text-xs"></i>
	  </button> -->
	
	  		
	    		
			
	      </nav></div>
	</div>
	
	<div class="main">
	</div>
	<img src="@/assets/evan.jpg" alt="main 里的图" class="main-img" />
	<div style="height: 800px;"></div>
	<div class="neirong">
		<h1>前端知识积累</h1>
		<p class="blog-title">yulice blog</p>
		  <p class="text-gray-500 text-lg">
		          入门笔记
		</p>
	</div>
	       
	<div class="anjian">
		<button class="bg-secondary text-white px-4 py-2 rounded-full text-sm btn-hover">HTML</button><br />
		<button class="bg-secondary text-white px-4 py-2 rounded-full text-sm btn-hover">CSS</button><br />
		<button class="bg-secondary text-white px-4 py-2 rounded-full text-sm btn-hover">JavaScript</button><br />
		<button class="bg-secondary text-white px-4 py-2 rounded-full text-sm btn-hover">网页布局</button><br />
		<button class="bg-secondary text-white px-4 py-2 rounded-full text-sm btn-hover">微信小程序</button><br />
		<button class="bg-secondary text-white px-4 py-2 rounded-full text-sm btn-hover">Vue</button><br />
		<button class="bg-secondary text-white px-4 py-2 rounded-full text-sm btn-hover">Git</button><br />
		<button class="bg-secondary text-white px-4 py-2 rounded-full text-sm btn-hover">sublime</button><br />
	</div>
</template>
<style>
	body {
		margin: 0;
	}

	.header {
		position: sticky;
		top: 0;
	}

	.main-img {
		width: 300px;
		display: block;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: 600px;
	}

	.neirong h1 {
		margin-top: -1100px;
		margin-left: 300px;
		color: darkblue;
		font-size: 50px;
		font-weight: bold;
	}

	.neirong p {
		margin-top: -25px;
		color: black;
		font-size: 45px;
		margin-left: 300px;
		font-weight: bold;
	}

	.anjian {
		margin-left: 300px;
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		max-width: 360px;
		max-width: 680px;
	}

	.anjian button {
		padding: 6px 16px;
		font-size: 20px;
		color: white;
		background: darkblue;
		border: none;
		border-radius: 9999px;
		cursor: pointer;
		transition: .2s;
	}

	.anjian button:hover {
		opacity: .9;
	}
	.header a{
		@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
		
	}
</style>